<template>
  <view class="health-records">
    <!-- 宠物选择器 -->
    <view class="pet-selector">
      <picker @change="onPetChange" :range="pets" range-key="name" :value="selectedPetIndex">
        <view class="picker-content">
          <text class="label">选择宠物：</text>
          <text class="value">{{selectedPet ? selectedPet.name : '请选择'}}</text>
          <uni-icons type="bottom" size="12" color="#666" />
        </view>
      </picker>
    </view>

    <!-- 记录列表 -->
    <view class="record-list" v-if="records.length">
      <view class="record-card" v-for="(record, index) in records" :key="index">
        <view class="record-header">
          <text class="record-type">{{record.record_type}}</text>
          <text class="record-date">{{formatDate(record.date)}}</text>
        </view>
        <view class="record-content">
          <text class="title">{{record.title}}</text>
          <text class="description">{{record.description}}</text>
          <view class="images" v-if="record.images && record.images.length">
            <image 
              v-for="(image, imgIndex) in record.images" 
              :key="imgIndex" 
              :src="image" 
              mode="aspectFill"
              @click="previewImage(record.images, imgIndex)"
            />
          </view>
        </view>
        <view class="record-footer" v-if="record.next_date">
          <uni-icons type="notification" size="14" color="#ff9900" />
          <text class="next-date">下次时间：{{formatDate(record.next_date)}}</text>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-else-if="selectedPet">
      <image src="/static/empty-records.png" mode="aspectFit" />
      <text>暂无健康记录</text>
    </view>

    <!-- 添加记录按钮 -->
    <view class="add-btn" @click="addRecord" v-if="selectedPet">
      <uni-icons type="plus" size="24" color="#fff" />
      <text>添加记录</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pets: [],
      selectedPetIndex: 0,
      records: []
    }
  },
  computed: {
    selectedPet() {
      return this.pets[this.selectedPetIndex]
    }
  },
  methods: {
    formatDate(timestamp) {
      if (!timestamp) return ''
      const date = new Date(timestamp)
      return date.getFullYear() + '-' + String(date.getMonth() + 1).padStart(2, '0') + '-' + String(date.getDate()).padStart(2, '0')
    },
    async loadPets() {
      try {
        const res = await uniCloud.callFunction({
          name: 'getPets',
          data: {}
        })
        if (res.result.code === 200) {
          this.pets = res.result.data
          if (this.pets.length) {
            this.loadRecords(this.pets[0]._id)
          }
        }
      } catch (error) {
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      }
    },
    async loadRecords(petId) {
      try {
        const res = await uniCloud.callFunction({
          name: 'getHealthRecords',
          data: { petId }
        })
        if (res.result.code === 200) {
          this.records = res.result.data
        }
      } catch (error) {
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      }
    },
    onPetChange(e) {
      this.selectedPetIndex = e.detail.value
      this.loadRecords(this.selectedPet._id)
    },
    addRecord() {
      if (!this.selectedPet) return
      uni.navigateTo({
        url: '/pages/add-record/add-record?petId=' + this.selectedPet._id
      })
    },
    previewImage(urls, current) {
      uni.previewImage({
        urls,
        current
      })
    }
  },
  onShow() {
    this.loadPets()
  }
}
</script>

<style lang="scss">
.health-records {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 120rpx;
}

.pet-selector {
  background: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;

  .picker-content {
    display: flex;
    align-items: center;
    
    .label {
      font-size: 28rpx;
      color: #666;
    }
    
    .value {
      flex: 1;
      font-size: 28rpx;
      color: #333;
      margin: 0 10rpx;
    }
  }
}

.record-list {
  padding: 20rpx;

  .record-card {
    background: #fff;
    border-radius: 16rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;

    .record-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16rpx;

      .record-type {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }

      .record-date {
        font-size: 24rpx;
        color: #999;
      }
    }

    .record-content {
      .title {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 8rpx;
        display: block;
      }

      .description {
        font-size: 26rpx;
        color: #666;
        margin-bottom: 16rpx;
        display: block;
      }

      .images {
        display: flex;
        flex-wrap: wrap;
        gap: 10rpx;

        image {
          width: 180rpx;
          height: 180rpx;
          border-radius: 8rpx;
        }
      }
    }

    .record-footer {
      margin-top: 16rpx;
      display: flex;
      align-items: center;
      gap: 8rpx;

      .next-date {
        font-size: 24rpx;
        color: #ff9900;
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;

  image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
  }

  text {
    color: #999;
    font-size: 28rpx;
  }
}

.add-btn {
  position: fixed;
  bottom: 40rpx;
  left: 50%;
  transform: translateX(-50%);
  background: #5cb85c;
  color: #fff;
  padding: 20rpx 60rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  gap: 10rpx;
  box-shadow: 0 4rpx 12rpx rgba(92, 184, 92, 0.3);

  text {
    font-size: 28rpx;
  }
}
</style> 